<template>
  <div class="menu" v-if="isOpen">
    <ul>
      <li>
        <nuxt-link to="/">
          <a>Explore</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/designer">
          <a>Hire Designer</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/about">
          <a>About</a>
        </nuxt-link>
      </li>
      <li>
        <nuxt-link to="/blog">
          <a>Blog</a>
        </nuxt-link>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MenuList',
  props: {
    isOpen: {
      type: Boolean,
      required: true,
    },
  },
});
</script>

<style scoped lang="scss">
.menu {
  position: absolute; 
  top: 100px; 
  left: 0; 
  width: 100vw;
  background: white; 
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影 */
  border-radius: 0 0 5px 5px; 
  z-index: 1;
  transition: all 0.3 ease;
}

.menu ul {
  display: flex; 
  flex-direction: column; /* 垂直排列列表项 */
  width: 100%; 
  padding: 0; 
  margin: 0; 
  list-style: none; 
}

.menu li {
  text-align: center; 
  padding: 10px 0; 
  border-bottom: 1px solid #eee; 
}

.menu li:hover {
  transform: scale(1.1);
}

.menu li:last-child {
  border-bottom: none; 
}
</style>
